<!-- 
  Pinia 起步：

    1. 安装
      npm install pinia

    2. 注册 pinia 的实例

    3. 按照需求与模块去定义仓库，使用 defineStore
      
      1. 选项式定义
      2. 组合式定义

    4. 直接在组件中使用即可

 -->

<template>
  <h1>App</h1>

  <ul>
    <li v-for="item in appStore.fruits" :key="item">{{ item }}</li>
  </ul>

  <button @click="appStore.$patch({ fruits: [...appStore.fruits, 'Banana'] })">
    修改 fruits 1
  </button>
  <button
    @click="
      appStore.$patch((store) => {
        store.fruits.push('Banana')
      })
    "
  >
    修改 fruits 2
  </button>

  <p>theme: {{ theme }}</p>
  <p>locale: {{ locale }}</p>
  <p>{{ appStore.theme }}</p>
  <p>{{ appStore.locale }}</p>
  <p>{{ appStore.getLocale() }}</p>
  <p>{{ appStore.isDark }}</p>

  <button @click="appStore.toggleTheme">toggleTheme</button>
  <button @click="userStore.$reset()">重置</button>

  <p>{{ userStore.token }}</p>
  <p>{{ userStore.info }}</p>
  <p>{{ userStore.hasLogin }}</p>

  <button @click="userStore.login()">登录</button>
  <button @click="userStore.logout()">登出</button>

  <button @click="userStore.token = 'myToken'">直接 修改token</button>
  <button @click="userStore.$patch({ token: 'myToken' })">使用 $patch 修改token</button>
</template>

<script setup>
import { toRef, toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from './stores/app'
import { useUserStore } from './stores/user'

const appStore = useAppStore()
const userStore = useUserStore()

console.log('appStore', appStore)

// 【不行的，会丢失响应式】直接对 appStore 做解构使用
// const { theme } = appStore

// 【单个时，推荐】使用 toRef 来操作
// const theme = toRef(appStore, 'theme')
// const locale = toRef(appStore, 'locale')

// 【不推荐, 因为 仓库实例对象中的属性太多了】使用 toRefs 来操作
// const obj = toRefs(appStore)
// const { theme, locale } = obj
// console.log('obj', obj)

// 【推荐，使用 pinia storeToRefs 】
const obj = storeToRefs(appStore)
const { theme, locale } = obj
console.log('obj', obj)
</script>
